Introdução à Linguagem R e ao Sistema Quarto

Minicurso
XIII Jornada de Educação, Ciência e Tecnologia

Prof. Dr. Washington Santos da Silva

IFMG - Campus Formiga

23 de outubro de 2024

Dia 2

Tópicos

  • Quarto Dashboards.

  • Aplicativos Web com shiny.

  • Dashboards com shiny e shinydashboard.d

Quarto Dashboards

Quarto Dashboards - O Básico

Cards

  • Dashboards são compostos por cards.

  • Unidade fundamental de exibição dentro dos painéis

Linhas e Colunas

Cards são organizados em rows e columns.

Layouts

Pages, tabsets, e sidebars permitem layouts mais avançados.

Primeiro Quarto Dashboard em R

Passo 1: format: dashboard 

dashboard-r.qmd
---
title: "Meu Primeiro Quarto dashboard"
format: dashboard
---

Passo 2: Adicione um card

dashboard-r.qmd
---
title: "Meu Primeiro Quarto dashboard"
format: dashboard
---

```{r}
library(ggplot2)
```

```{r}
ggplot(mpg, aes(x = cty, y = hwy)) +
  geom_point()
```

Passo 2: Adicione um card

dashboard-r.qmd
---
title: "Meu Primeiro Quarto dashboard"
format: dashboard
---

```{r}
library(ggplot2)
```

```{r}
ggplot(mpg, aes(x = cty, y = hwy)) +
  geom_point()
```

Passo 3: Adicione outro card

dashboard-r.qmd
---
title: "Meu Primeiro Quarto dashboard"
format: dashboard
---

```{r}
library(ggplot2)
```

```{r}
ggplot(mpg, aes(x = cty, y = hwy)) +
  geom_point()
```

```{r}
ggplot(mpg, aes(x = drv)) +
  geom_bar()
```

Passo 3: Adicione outro card

dashboard-r.qmd
---
title: "Meu Primeiro Quarto dashboard"
format: dashboard
---

```{r}
library(ggplot2)
```

```{r}
ggplot(mpg, aes(x = cty, y = hwy)) +
  geom_point()
```

```{r}
ggplot(mpg, aes(x = drv)) +
  geom_bar()
```

Passo 4: Adicione titles aos cards

dashboard-r.qmd
---
title: "Meu Primeiro Quarto dashboard"
format: dashboard
---

```{r}
library(ggplot2)
```

```{r}
#| title: Highway vs. city mileage
ggplot(mpg, aes(x = cty, y = hwy)) +
  geom_point()
```

```{r}
#| title: Drive types
ggplot(mpg, aes(x = drv)) +
  geom_bar()
```

Passo 4: Adicione titles aos cards

dashboard-r.qmd
---
title: "Meu Primeiro Quarto dashboard"
format: dashboard
---

```{r}
library(ggplot2)
```

```{r}
#| title: Highway vs. city mileage
ggplot(mpg, aes(x = cty, y = hwy)) +
  geom_point()
```

```{r}
#| title: Drive types
ggplot(mpg, aes(x = drv)) +
  geom_bar()
```

Passos 1 - 4

Pages

dashboard-r.qmd
---
title: "Pages"
format: dashboard
---

```{r}
library(ggplot2)
```

# Scatter

```{r}
#| title: Highway vs. city mileage
ggplot(mpg, aes(x = cty, y = hwy)) +
  geom_point()
```

# Bar

```{r}
#| title: Drive types
ggplot(mpg, aes(x = drv)) +
  geom_bar()
```

Pages

dashboard-r.qmd
---
title: "Pages"
format: dashboard
---

```{r}
library(ggplot2)
```

# Scatter

```{r}
#| title: Highway vs. city mileage
ggplot(mpg, aes(x = cty, y = hwy)) +
  geom_point()
```

# Bar

```{r}
#| title: Drive types
ggplot(mpg, aes(x = drv)) +
  geom_bar()
```

Pages

dashboard-r.qmd
---
title: "Pages"
format: dashboard
---

```{r}
library(ggplot2)
```

# Scatter

```{r}
#| title: Highway vs. city mileage
ggplot(mpg, aes(x = cty, y = hwy)) +
  geom_point()
```

# Bar

```{r}
#| title: Drive types
ggplot(mpg, aes(x = drv)) +
  geom_bar()
```

Logo

dashboard-r.qmd
---
title: "Logo"
format: 
  dashboard:
    logo: img/fusca.jpeg
---

```{r}
library(ggplot2)
```

# Scatter

```{r}
#| title: Highway vs. city mileage
ggplot(mpg, aes(x = cty, y = hwy)) +
  geom_point()
```

# Bar

```{r}
#| title: Drive types
ggplot(mpg, aes(x = drv)) +
  geom_bar()
```

Sidebars - Global

dashboard-r.qmd
---
title: "Sidebars - Global"
format: 
  dashboard:
    logo: img/fusca.jpeg
---

```{r}
library(ggplot2)
```

# {.sidebar}

As informações e/ou interatividade que você deseja em todas as páginas 
vão aqui.

# Scatter

```{r}
#| title: Highway vs. city mileage
ggplot(mpg, aes(x = cty, y = hwy)) +
  geom_point()
```

# Bar

```{r}
#| title: Drive types
ggplot(mpg, aes(x = drv)) +
  geom_bar()
```

Sidebars - Global

dashboard-r.qmd
---
title: "Sidebars - Global"
format: 
  dashboard:
    logo: img/fusca.jpeg
---

```{r}
library(ggplot2)
```

# {.sidebar}

As informações e/ou interatividade que você deseja em todas as páginas 
vão aqui.

# Scatter

```{r}
#| title: Highway vs. city mileage
ggplot(mpg, aes(x = cty, y = hwy)) +
  geom_point()
```

# Bar

```{r}
#| title: Drive types
ggplot(mpg, aes(x = drv)) +
  geom_bar()
```

Sidebars - Global

dashboard-r.qmd
---
title: "Sidebars - Global"
format: 
  dashboard:
    logo: img/fusca.jpeg
---

```{r}
library(ggplot2)
```

# {.sidebar}

As informações e/ou interatividade que você deseja em todas as páginas 
vão aqui.

# Scatter

```{r}
#| title: Highway vs. city mileage
ggplot(mpg, aes(x = cty, y = hwy)) +
  geom_point()
```

# Bar

```{r}
#| title: Drive types
ggplot(mpg, aes(x = drv)) +
  geom_bar()
```

Sidebars - Page

dashboard-r.qmd
---
title: "Sidebars - Per page"
format: 
  dashboard:
    logo: img/fusca.jpeg
---

```{r}
library(ggplot2)
```

# Scatter

## {.sidebar}

As informações e/ou interatividade que você deseja em uma única página 
vão aqui.

## 

```{r}
#| title: Highway vs. city mileage
ggplot(mpg, aes(x = cty, y = hwy)) +
  geom_point()
```

# Bar

```{r}
#| title: Drive types
ggplot(mpg, aes(x = drv)) +
  geom_bar()
```

Sidebars - Page

dashboard-r.qmd
---
title: "Sidebars - Per page"
format: 
  dashboard:
    logo: img/fusca.jpeg
---

```{r}
library(ggplot2)
```

# Scatter

## {.sidebar}

As informações e/ou interatividade que você deseja em uma única página 
vão aqui.

## 

```{r}
#| title: Highway vs. city mileage
ggplot(mpg, aes(x = cty, y = hwy)) +
  geom_point()
```

# Bar

```{r}
#| title: Drive types
ggplot(mpg, aes(x = drv)) +
  geom_bar()
```

Sidebars - Page

dashboard-r.qmd
---
title: "Sidebars - Per page"
format: 
  dashboard:
    logo: img/fusca.jpeg
---

```{r}
library(ggplot2)
```

# Scatter

## {.sidebar}

As informações e/ou interatividade que você deseja em uma única página 
vão aqui.

## 

```{r}
#| title: Highway vs. city mileage
ggplot(mpg, aes(x = cty, y = hwy)) +
  geom_point()
```

# Bar

```{r}
#| title: Drive types
ggplot(mpg, aes(x = drv)) +
  geom_bar()
```

Rows

Por padrão, os cards são dispostos em linhas:

dashboard-r.qmd
---
title: "Rows"
format: 
  dashboard:
    logo: img/fusca.jpeg
---

```{{r}
library(ggplot2)
```

## Scatter

```{r}
#| title: Highway vs. city mileage
ggplot(mpg, aes(x = cty, y = hwy)) +
  geom_point()
```

## Bar

```{r}
#| title: Drive types
ggplot(mpg, aes(x = drv)) +
  geom_bar()
```

Rows

dashboard-r.qmd
---
title: "Rows"
format: 
  dashboard:
    logo: img/fusca.jpeg
---

```{{r}
library(ggplot2)
```

## Scatter

```{r}
#| title: Highway vs. city mileage
ggplot(mpg, aes(x = cty, y = hwy)) +
  geom_point()
```

## Bar

```{r}
#| title: Drive types
ggplot(mpg, aes(x = drv)) +
  geom_bar()
```

Rows

O valor padrão da chave orientation é rows:

dashboard-r.qmd
---
title: "Rows"
format: 
  dashboard:
    orientation: rows
    logo: img/fusca.jpeg
---

```{r}
library(ggplot2)
```

## Scatter

```{r}
#| title: Highway vs. city mileage
ggplot(mpg, aes(x = cty, y = hwy)) +
  geom_point()
```

## Bar

```{r}
#| title: Drive types
ggplot(mpg, aes(x = drv)) +
  geom_bar()
```

Columns

Definir orientation como columns faz com que cada ## indique uma coluna em vez de uma linha:

dashboard-r.qmd
---
title: "Columns"
format: 
  dashboard:
    orientation: columns
    logo: img/fusca.jpeg
---

```{r}
library(ggplot2)
```

## Scatter

```{r}
#| title: Highway vs. city mileage
ggplot(mpg, aes(x = cty, y = hwy)) +
  geom_point()
```

## Bar

```{r}
#| title: Drive types
ggplot(mpg, aes(x = drv)) +
  geom_bar()
```

Columns

dashboard-r.qmd
---
title: "Columns"
format: 
  dashboard:
    orientation: columns
    logo: img/fusca.jpeg
---

```{r}
library(ggplot2)
```

## Scatter

```{r}
#| title: Highway vs. city mileage
ggplot(mpg, aes(x = cty, y = hwy)) +
  geom_point()
```

## Bar

```{r}
#| title: Drive types
ggplot(mpg, aes(x = drv)) +
  geom_bar()
```

Tabsets

dashboard-r.qmd
---
title: "Tabsets"
format: 
  dashboard:
    logo: img/fusca.jpeg
---

```{r}
library(ggplot2)
```

## Visão Geral {.tabset}

### Objetivo

Este painel resume uma análise sobre a economia de combustível de 
carros.

### Carro

Isto é um carro

![](img/fusca.jpeg){fig-alt="Ilustração de um carro." width="299"}

## Gráficos {.tabset}

### Scatter

```{r}
#| title: Highway vs. city mileage
ggplot(mpg, aes(x = cty, y = hwy)) +
  geom_point()
```

### Bar

```{r}
#| title: Drive types
ggplot(mpg, aes(x = drv)) +
  geom_bar()
```

Tabsets

Cada card dentro de uma linha/coluna ou cada linha/coluna dentro de outra se torna uma aba:

dashboard-r.qmd
---
title: "Tabsets"
format: 
  dashboard:
    logo: img/fusca.jpeg
---

```{r}
library(ggplot2)
```

## Visão Geral {.tabset}

### Objetivo

Este painel resume uma análise sobre a economia de combustível de 
carros.

### Carro

Isto é um carro

![](img/fusca.jpeg){fig-alt="Ilustração de um carro." width="299"}

## Gráficos {.tabset}

### Scatter

```{r}
#| title: Highway vs. city mileage
ggplot(mpg, aes(x = cty, y = hwy)) +
  geom_point()
```

### Bar

```{r}
#| title: Drive types
ggplot(mpg, aes(x = drv)) +
  geom_bar()
```

Value boxes

  • Value boxes são uma ótima maneira de exibir valores simples de forma proeminente em um painel.

  • Você pode criar caixas de valor em células executáveis ou markdown simples em divs.

  • Value boxes usam ícones Bootstrap https://icons.getbootstrap.com e podem ser definidas para qualquer cor (por exemplo, com um código HEX)

    Color alias Default theme color(s)
    primary Azum
    secondary Cinza
    success Verde
    info Azul brilhante
    warning Amarelo/Laranja
    danger Vermelho
    light Cinza claro
    dark Preto

Value boxes

Pacotes shiny e shinydasboard

Shiny

Shiny é um pacote R que facilita a criação de aplicativos web interativos com a linguagem R. Você pode hospedar aplicativos shiny em uma página da web ou incorporá-los em documentos Quarto, ou criar dashboards. Você também pode estender seus aplicativos Shiny com CSS, htmlwidgets e JavaScript.

O que é um Aplicativo (App) Web?

Características

  • As atualizações são baseadas nos inputs e na interação com o usuário.

  • Composto por dois componentes: User Interface (UI) & Server

Partes de um Aplicativo Shiny

# Carrega o pacote shiny e outros necessários
library(shiny)

# Cria a interface do usuário (UI)
ui <- fluidPage()

# Função personalizada executada no servidor (backend)
server <- function(input, output, session) {}

# Executa o App
shinyApp(ui = ui, server = server)

01_demo.R - Nosso Primeiro App

# Carrega os pacotes
library(tidyverse)
library(shiny)

# Importa os dados
dados <- readr::read_csv(here::here("dados/dados_vendas.csv"))

# Define a interface do usuário
ui = fluidPage(
  titlePanel("Receita Diária nas Cidades"),
  sidebarLayout(
    sidebarPanel(
      radioButtons(
        "Cidade", "Selecione uma cidade",
        choices = c(
          "Formiga",
          "Arcos",
          "Pimenta",
          "Piumhi"
        )
      ) 
    ),
    mainPanel( 
      plotOutput("plot")
    )
  )
)

# Cria função que define as operações no servidor
server = function(input, output, session) {
  output$plot = renderPlot({
    dados |>
      filter(Cidade %in% input$Cidade) |>
      ggplot(aes(x = Data, y = Receita)) +
      geom_line() +
      theme_minimal()
  })
}

# Executa o Aplicativo
shinyApp(ui = ui, server = server)

Layout da Barra Lateral (Sidebar Layout)

Galeria de Input Widgets

https://shiny.posit.co/r/components/

Uma Breve Tour nas Widgets

Pacote shinydashboard

Características

O shinydashboard facilita o uso do Shiny para criar dashboards.

Um (shiny)dashboard tem três partes:

  • um Cabeçalho;

  • uma Barra Lateral e;

  • um Corpo.

Pacote shinydashboard

# Carrega os pacotes
library(shiny)
library(shinydashboard)

# Define as Partes do Dashboard
ui <- dashboardPage(
  dashboardHeader(),  # cabeçalho
  dashboardSidebar(), # barra lateral
  dashboardBody()     # corpo
)

# Função personalizada executada no servidor (backend)
server <- function(input, output) { }

# Executa o App
shinyApp(ui, server)

Obrigado!

“Os estudantes não sabem o que precisam saber até que precisem saber.”

The Handbook for Economics Lecturers.

Referências